<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/diaryList">日记管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>日记详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">标题:</div>
            <div class="meizong_detail_val">{{detail.title}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">内容:</div>
            <div class="meizong_detail_val">
              <template v-for="(item,index) in detail.content">
                <div :key="index">{{item}}</div>
              </template>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">日记封面:</div>
            <ant-img :antImgesUl="detail.cover" />
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">日记图片:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.img"/>
              <!-- <template v-for="(item,index) in detail.img">
                <ant-img :antImges="item" :key="index" :antImgesUl="detail.img"/>
              </template> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">消费凭证:</div>
            <ant-img :antImgesUl="detail.consumeProof" />
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">关联类型:</div>
            <div class="meizong_detail_val">{{detail.relatedType | relatedType}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户名:</div>
            <div class="meizong_detail_val">{{detail.memberName}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户手机:</div>
            <div class="meizong_detail_val">{{detail.mobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">用户标签:</div>
            <div class="meizong_detail_val">
              <a-tag color="green" v-for="(item , index) in detail.tagList" :key="index">{{item}}</a-tag>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">日记等级:</div>
            <div class="meizong_detail_val">
              <span class="meizong_detail_span">{{detail.grade | grade}}</span>
              <a-button type="primary" @click="funEditGrade" icon="edit" size="small">修改等级</a-button>
            </div>
          </div>
          <div class="meizong_detail_row" v-if="detail.merchant">
            <div class="meizong_detail_title">商家名称:</div>
            <div class="meizong_detail_val">{{detail.merchant.name}}</div>
          </div>
          <div class="meizong_detail_row" v-if="detail.tech">
            <div class="meizong_detail_title">技师名称:</div>
            <div class="meizong_detail_val">{{detail.tech.name}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">发布地址经度:</div>
            <div class="meizong_detail_val">{{detail.lon}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">发布地址纬度:</div>
            <div class="meizong_detail_val">{{detail.lat}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">状态:</div>
            <div class="meizong_detail_val">{{detail.status | status}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">来源:</div>
            <div class="meizong_detail_val">{{detail.source | source}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">是否优质日记:</div>
            <div class="meizong_detail_val">{{detail.excellent | excellent}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">浏览量:</div>
            <div class="meizong_detail_val">{{detail.browse}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">点赞数:</div>
            <div class="meizong_detail_val">{{detail.star}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">收藏数:</div>
            <div class="meizong_detail_val">{{detail.collect}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">评论数:</div>
            <div class="meizong_detail_val">{{detail.comment}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">评分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.score" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">效果分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.effect" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">环境分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.env" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">服务分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.service" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">专业分:</div>
            <div class="meizong_detail_val">
              <a-rate v-model="detail.major" disabled allowHalf/>
            </div>
          </div>
          <div class="meizong_detail_row" v-if="detail.video">
            <div class="meizong_detail_title">日志视频:</div>
            <div class="meizong_detail_val">
              <div class='demo'>
                <VideoModal :videoUrl="detail.video"></VideoModal>
              </div>
            </div>
          </div>
          <div class="meizong_detail_row" v-show="detail.status == 0">
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="danger" @click="handCheck()" >进行审核</a-button >
            </div>
          </div>
          <!-- <div class="meizong_detail_row" v-show="detail.status == 10">
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="danger" @click="handUpDown(0)" >日记下架</a-button >
            </div>
          </div> -->
        </a-tab-pane>
        <a-tab-pane :key="2" tab="审核记录">
          <a-table 
            ref="table" 
            size="middle" 
            bordered 
            rowKey="id" 
            :scroll="{ x: 1300 }"
            :columns="columns" 
            :dataSource="tableData" 
            :pagination="ipagination" 
            :loading="loading" 
            @change="handleTableChange" >
          </a-table>
        </a-tab-pane> 
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <examine-modal ref="modalForm" @closeModal="closeModal" @examineModal="examineModal"></examine-modal>
    <up-down-modal ref="upDownForm" @closeModal="closeModal" @upDownModal="upDownModal"></up-down-modal>
    <grade-modal ref="gradeForm" @closeModal="closeModal"></grade-modal>
  </a-card>
</template>

<script>
// import moment from 'moment'
import ExamineModal from '@/views/diary/modules/examineModal'
import AntImg from '@/views/components/meizong/antImg'
import UpDownModal from '@/views/components/meizong/upDownModal'
import ApiTree from "@/api/diary/diaryList";
import VideoModal from '@/views/components/meizong/videoModal';
import gradeModal from '@/views/diary/modules/gradeModal'
import { Slime, crud } from "@/mixins/slime";

export default {
  name: "diaryDetail",
  mixins: [Slime],
  components: {
    ExamineModal,
    AntImg,
    UpDownModal,
    VideoModal,
    gradeModal,
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail:{},
      //table
      tableData:[],
      columns: [
        {
          title: "审批人id",
          align: "center",
          dataIndex: "userId",
        },
        {
          title: "审批人姓名",
          align: "center",
          dataIndex: "userName",
        },
        {
          title: "动作",
          align: "center",
          dataIndex: "action",
          customRender: function (status) {
            switch (status) {
              case 0:
                return "待审核";
              case 10:
                return "审核通过";
              case 20:
                return "审核失败";
              default:
                return "未知状态";
            }
          },
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id
    this.detailId = id
    this.loadData();
    this.loadRecords();
  },
  methods: {
    // 加载表格数据
    loadData() {
      let that = this
      let id = this.detailId
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        that.detail = {
          ...data,
          cover: [data.cover],
          img: that.antImageArr(data.img),
          consumeProof: that.antImageArr(data.consumeProof),
          content: data.content ? data.content.split("\n") : [],
          score: data.score/10,
          effect: data.effect/10,
          env: data.env/10,
          service: data.service/10,
          major: data.major/10,
        }
      })
    },
    //审核记录
    loadRecords(){
      let id = this.detailId
      ApiTree.detailRecords(id).then((res)=>{
        let data = res.result
        this.tableData = data
      })
    },
    //1审核通过/0不通过
    handCheck(){
      this.$refs.modalForm.open()
    },
    //审核结束
    examineModal(val){
      const that = this;
      let param = {
        ...val,
        diaryId: this.detailId, //这里记得修改
      }
      ApiTree.detailCheck(param).then((res) => {
        let param2 = {
          id: that.detailId,
          grade: val.grade
        }
        ApiTree.detailUpdateInfo(param2)
          .then((res) => {
            if(res.code == 0){
              that.$message.success('操作成功');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.loadData();
            that.loadRecords();
          });
      })
    },
    //1上架 0下架
    handUpDown(val){
      this.$refs.upDownForm.open(val,'日记',this.detail.status)
    },
    //上下架结束
    upDownModal(val){
      const that = this;
      let ids = []
      ids.push(parseInt(this.detailId))
      let param = {
        ids: ids,
        subUse: val.subUse,
        status:"PlatformDown",
      }
      ApiTree.detailUpDown(param).then((res) => {
        that.$message.success('操作成功');
      }).finally(() => {
        that.loadData();
        that.loadRecords();
      });
    },
    //修改日记等级
    funEditGrade(){
      let detailId = this.detailId;
      this.$refs.gradeForm.open(detailId, this.detail.grade);
    },
  },
  filters: {
    //订单状态
    relatedType: function (status) {
      switch (status) {
        case 0:
          return "无关联";
        case 1:
          return "商品";
        case 2:
          return "订单";
        case 3:
          return "商家";
        case 4:
          return "技师";
        default:
          return "未知";
      }
    },
    status: function (status) {
      switch (status) {
        case 0:
          return "待审核";
        case 10:
          return "审核通过";
        case 20:
          return "审核失败";
        default:
          return "未知";
      }
    },
    source: function (status) {
      switch (status) {
        case 0:
          return "会员添加";
        case 1:
          return "商家添加";
        default:
          return "未知";
      }
    },
    excellent: function (status) {
      switch (status) {
        case 0:
          return "否";
        case 1:
          return "是";
        default:
          return "未知";
      }
    },
    grade: function (grade) {
      switch (grade) {
        case 1:
          return "普通日记";
        case 2:
          return "小编精选";
        case 3:
          return "首页推荐";  
        default:
          return "未设置";
      }
    },
  },
};
</script>
<style scoped>
.meizong_detail_val{
  width: 80%;
}
.demo {
  display: inline-block;
  width: 500px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
</style>